<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DG8_07</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <!-- 自定义样式 -->
    <style>
        body {
            background-image: url(img/restaurant.jpg);
            background-size: cover;
        }
        .restaurant-info {
            margin: 50px auto;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .restaurant-header {
            background-color: #007bff;
            color: white;
            padding: 20px;
        }
        .restaurant-content {
            padding: 40px;
        }
        .card {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">What's for today ?</a>
            <!-- 导航栏右侧内容 -->
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                
                <li class="nav-item">
                    <a class="nav-link" href="user.html">user</a>
                </li>
                <!-- <li class="nav-item">
                    <a class="nav-link" href="#" id="logoutBtn">Logout</a>
                </li> -->
                
            </ul>
        </div>
    </nav>
    

    <!-- 页面内容 -->
    <div class="container">
        <!-- 餐厅信息 -->
        <div class="restaurant-info">
            <!-- 餐厅头部 -->
            <div class="restaurant-header">
                <h1>Nearby Restaurants</h1>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addRestaurantModal">Add Restaurant</button>
            </div>
            <!-- 餐厅内容 -->
            <div class="restaurant-content">
                <div id="restaurant-list">
                    <!-- 这里将动态生成餐厅卡片 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 添加餐厅模态框 -->
    <div class="modal fade" id="addRestaurantModal" tabindex="-1" aria-labelledby="addRestaurantModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addRestaurantModalLabel">Add Restaurant</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 餐厅表单 -->
                    <form id="addRestaurantForm">
                        <div class="mb-3">
                            <label for="inputRestaurantName" class="form-label">Restaurant Name</label>
                            <input type="text" class="form-control" id="inputRestaurantName" required>
                        </div>
                        <div class="mb-3">
                            <label for="inputAddress" class="form-label">Address</label>
                            <input type="text" class="form-control" id="inputAddress" required>
                        </div>
                        <div class="mb-3">
                            <label for="inputImageUrl" class="form-label">Image URL</label>
                            <input type="url" class="form-control" id="inputImageUrl" required>
                        </div>
                        <div class="mb-3">
                            <label for="inputAverageCost" class="form-label">Average Cost</label>
                            <input type="number" class="form-control" id="inputAverageCost" required>
                        </div>
                        <div class="mb-3">
                            <label for="inputUserRating" class="form-label">User Rating</label>
                            <input type="number" class="form-control" id="inputUserRating" min="1" max="5" required>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript代码 -->
    <script src="main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
